<template>
  <div>
    <h1>违规投诉</h1>
    <div class="button-container">
      <button class="complaint-button" @click="showComplaintDialog = true">去投诉</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>动态标题</th>
          <th>创建时间</th>
          <th>处理状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(complaint, index) in complaints" :key="complaint.id">
          <td>{{ index + 1 }}</td>
          <td>{{ complaint.title }}</td>
          <td>{{ complaint.creationDate }}</td>
          <td>{{ complaint.status }}</td>
          <td><a href="#" @click.prevent="viewComplaint(complaint.id)">查看</a></td>
        </tr>
      </tbody>
    </table>

    <!-- 投诉对话框 -->
    <div v-if="showComplaintDialog" class="dialog">
      <div class="dialog-content">
        <h2>创建投诉</h2>
        <form @submit.prevent="submitComplaint">
          <div class="form-item">
            <label for="title">
              <span class="required">*</span>投诉标题
            </label>
            <input type="text" id="title" v-model="newComplaint.title" required />
          </div>
          <div class="form-item">
            <label for="content">
              <span class="required">*</span>投诉内容
            </label>
            <textarea id="content" v-model="newComplaint.content" required></textarea>
          </div>
          <div class="form-item">
            <label for="contact">
              <span class="required">*</span>联系人
            </label>
            <input type="text" id="contact" v-model="newComplaint.contact" required />
          </div>
          <div class="form-item">
            <label for="phone">
              <span class="required">*</span>联系电话
            </label>
            <input type="text" id="phone" v-model="newComplaint.phone" required />
          </div>
          <div class="button-group">
            <button type="submit">保存</button>
            <button type="button" @click="showComplaintDialog = false">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import Mock from 'mockjs';

export default {
  data() {
    return {
      complaints: [],
      showComplaintDialog: false,
      newComplaint: {
        title: '',
        content: '',
        contact: '',
        phone: ''
      }
    };
  },
  created() {
    this.fetchComplaints();
  },
  methods: {
    fetchComplaints() {
      const data = Mock.mock({
        'complaints|10': [{
          'id|+1': 1,
          title: '@title(5, 10)',
          creationDate: '@date("yyyy-MM-dd")',
          status: '@pick(["正在处理中", "处理完成"])'
        }]
      });
      this.complaints = data.complaints;
    },
    viewComplaint(id) {
      this.$router.push(`/complaints/${id}`);
    },
    submitComplaint() {
      // 模拟提交投诉信息
      const complaint = {
        id: this.complaints.length + 1,
        title: this.newComplaint.title,
        content: this.newComplaint.content,
        creationDate: new Date().toISOString().split('T')[0],
        status: '正在处理中'
      };
      this.complaints.push(complaint);
      this.newComplaint = { title: '', content: '', contact: '', phone: '' };
      this.showComplaintDialog = false;
      alert('提交成功');
    }
  }
};
</script>

<style scoped>
h1 {
  margin-bottom: 20px;
  font-size: 24px;
}

.button-container {
  margin-bottom: 20px;
  text-align: right;
}

.complaint-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.complaint-button:hover {
  background-color: #45a049;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f0f0f0;
}

th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

tr:hover {
  background-color: #f5f5f5;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 500px;
}

.dialog-content h2 {
  margin-top: 0;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  width: 100px; /* 固定标签宽度 */
}

.form-item input,
.form-item textarea {
  flex: 1; /* 输入框占据剩余空间 */
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.dialog-content .required {
  color: red;
}

.dialog-content .button-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.dialog-content .button-group button {
  padding: 10px 20px;
  margin-left: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.dialog-content .button-group button[type="submit"] {
  background-color: #4CAF50;
  color: white;
}

.dialog-content .button-group button[type="submit"]:hover {
  background-color: #45a049;
}

.dialog-content .button-group button[type="button"] {
  background-color: #f0f0f0;
  color: #333;
}

.dialog-content .button-group button[type="button"]:hover {
  background-color: #e0e0e0;
}
</style>